{extend name="public/base"/}
{block name="style"}
<script type="text/javascript" src="/public/lboyue/m/sitejs/book.js?v=20181123"></script>
<script type="text/javascript">

    $(document).ready(function () {


        $('.moreIco').click(function () {

            if($(this).hasClass('closeIco')){

                $('#header').removeClass('app_headerFixed2');
                $(this).removeClass('closeIco');
                $('.app_header_second').hide();
                $('.app_meskSection').hide();

            }else{

                $('#header').addClass('app_headerFixed2');
                $(this).addClass('closeIco');
                $('.app_header_second').show();
                $('.app_meskSection').show();
            }



        })

        $('body').on('click','.app_meskSection',function () {
            $('.app_header_second').hide();
            $('.app_meskSection').hide();
            $('#header').removeClass('app_headerFixed2');
            $('.moreIco').removeClass('closeIco');
        })

		
    })

</script>
{/block}
{block name="body"}
<div class="app_goBackToTop"></div>
<div class="app_meskSection"></div>

<div class="container">

    <div class="app_header_section2  app_scrollerHeader" id="header">
        <div class="app_header_detail2">
            <div class="app_header_back"></div>
            <div class="app_header_h1">
                评论回复                <a href="/personal/bookcase"> <i class="shujiaIco"></i></a>
                <i class="moreIco"></i>
            </div>
        </div>
		{include file="public/dropnav" /}
	</div>



    <div class="app_body">
        
    <div class="app_userComment">
        <div class="public_addPositionRelative textareaStyle" id="textarea">
            <i class="app_userCommentfont"><i></i>0/200</i>
            <textarea id="comment"  cols="30" rows="10" placeholder="有深度的评论，我也来说两句……" class="app_comment_textarea" maxlength="200">@{$username}：</textarea>
        </div>

        <div class="app_faceIcon">
            <span class="app_faceIcon_font" id="faceButton">表情</span>
            <div class="app_faceWindow" style="display: block;">
                <ul>
                                            <li>
                            <img onclick="selectFace('[faceico_1]')" src="/public/lboyue/images/face/faceico_1.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_2]')" src="/public/lboyue/images/face/faceico_2.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_3]')" src="/public/lboyue/images/face/faceico_3.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_4]')" src="/public/lboyue/images/face/faceico_4.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_5]')" src="/public/lboyue/images/face/faceico_5.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_6]')" src="/public/lboyue/images/face/faceico_6.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_7]')" src="/public/lboyue/images/face/faceico_7.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_8]')" src="/public/lboyue/images/face/faceico_8.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_9]')" src="/public/lboyue/images/face/faceico_9.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_10]')" src="/public/lboyue/images/face/faceico_10.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_11]')" src="/public/lboyue/images/face/faceico_11.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_12]')" src="/public/lboyue/images/face/faceico_12.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_13]')" src="/public/lboyue/images/face/faceico_13.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_14]')" src="/public/lboyue/images/face/faceico_14.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_15]')" src="/public/lboyue/images/face/faceico_15.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_16]')" src="/public/lboyue/images/face/faceico_16.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_17]')" src="/public/lboyue/images/face/faceico_17.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_18]')" src="/public/lboyue/images/face/faceico_18.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_19]')" src="/public/lboyue/images/face/faceico_19.png" alt=""></li>
                                            <li>
                            <img onclick="selectFace('[faceico_20]')" src="/public/lboyue/images/face/faceico_20.png" alt=""></li>
                                    </ul>
            </div>

        </div>

        <button class="app_comment_button" onclick="subbookcommentdata()">提交评论</button>
    </div>

    <div class="app_comment">
        <div class="app_listBlock_title tit_icon1">
            <span class="h1">评论<i>（0）</i></span>
        </div>

                <div class="app_comment_list">
            <ul id="bookcommentdatas">
            </ul>
        </div>
        <div class="app_pinglun"><a href="javascript:void(0)" onclick="getmorebookcomment(2)"><i>更多评论</i></a></div>
        
    </div>
        
	{block name="include"}{include file="public:footer" /}{/block}
    </div>
</div>

{/block}
{block name="script"}
	<script type="text/javascript">

        const bookcommentlength = "200";

        $(document).ready(function () {

            $('#textarea textarea').bind("input propertychange", function(){
                if($(this).val().length< bookcommentlength){
                    $(this).prev().html('<i></i>'+$(this).val().length+'/'+bookcommentlength);
                }else{
                    $(this).prev().html('<i style="margin-right: 0.3rem; color: #ea4136; font-size: 0.28rem">最大只能输入'+bookcommentlength+'字</i>'+$(this).val().length+'/'+bookcommentlength);
                    return;
                }
            })
			getmorebookcomment(1);
        })

		var isbool=true;//触发开关，防止多次调用事件
        var moreloading = true;
        var pageindex = 2;
        function getmorebookcomment(pageindex) {
            if (!moreloading) {
                malert("没有更多评论数据了");
                return "";
            }
            var bookid = "{$bookid}";
            var pagesize = "5";
			
			if(isbool==true){
				$.ajax({
					url      : "/api/commit/getmorereplies",
					type     : "POST",
					dataType : "json",
					data     : {
						"bookid" : bookid,
						"page" : pageindex,
						"reviewid" : "{$reviewid}"
					},
					success  : function (re) {
						isbool=true;
						var code = re.code;
						switch (code)
						{
							case 1:
								var data = re.data;
								var html = "";
								if (data.length ==0) {
									moreloading = false;
								}
								for (var i = 0; i < data.length ; i++)
                                {
									html +=  ' <li>';
									html +=  ' <span class="userHeader"><a href=""><img src="'+data[i].avatar+'" /></a></span>';
									html +=  ' <div class="contentList">                            <div class="userName">'+data[i].username+'</div>                            <div class="userContent">'+data[i].content+'</div>                        </div>                        <div class="bottom">                            <span class="time">'+data[i].create_time+'</span>                            <a href="JavaScript:;"></a>                        </div>            </li>';
								}
								$("#bookcommentdatas").append(html);
								pageindex++;
								break;
							case 999:
								moreloading = false;
								malert(re.msg, 1200);
								break;
							default:
								malert(re.msg, 1200);
								break;
						}
					},
					error    : function () {
						malert("没有更多评论回复数据了", 1200);
						return "";
					}
				});
			}
        }

        function subbookcommentdata() {
            var bookid = "{$bookid}";
            var comment = $("#comment").val();

            if (isnullorempty(bookid))
            {
                malert("书籍编号丢失");
                return "";
            }

            if (isnullorempty(comment))
            {
                malert("评论内容不能为空");
                return "";
            }

            $.ajax({
                url      : "/book/replies",
                type     : "POST",
                dataType : "json",
                data     : {
                    "articleid" : bookid,
                    "content" : comment,
                    "reviewid" : "{$reviewid}",
                },
                success  : function (re) {
                    var code = re.code;
                    switch (code)
                    {
                        case 1:
                            malert(re.msg, 1200);
                            setTimeout(function () {
                                window.location.reload();
                            }, 1200);
                            break;
                        case 2:
                           var url  = "/login.html?backurl="+encodeURIComponent(window.location.href);
                            malert(re.msg, 1200, 4);
							setTimeout(function () {
								window.location.href=url;
                            }, 1200);
                            break;
                        default:
                            malert(re.msg, 1200);
                            break;
                    }
                },
                error    : function () {
                    malert("服务器开小差了～", 1200, 2);
                    return "";
                }
            });
        }


        /**
         * 设置表情
         * @param listype
         */
        function selectFace(listype) {
            var comment = $("#comment").val();
            var newhtml = comment+listype;
            $("#comment").val(newhtml);
        }
		
    </script>
{/block}


